<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册页</title>
    <link rel="stylesheet" href="../css/register.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_3414996_ncgzq158vn.css">
    <script src="../js/axios.min.js"></script>
</head>

<body>
    <div class="regwrap">
        <div class="reg-con">
            <h1 class="logo">LOGIN</h1>
            <h1 class="title">注册</h1>
            <div class="usernamewrap inputs">
                <input type="text" name="" id="username" placeholder="请输入用户名(6-12位小写字母数字组合)">
                <span>请输入6-12位小写字母数字组合</span>
            </div>
            <div class="paswordwrap inputs">
                <input type="password" name="" id="password" placeholder="请输入密码(6-8位的任意数字或字母组合)">
                <span>请输入6-8位的任意数字或字母组合</span>
            </div>
            <button id="reg">点击注册</button>
            <div class="index">
                <a href="./index.html" target="_blank">
                    <i class="iconfont icon-shouye"></i> 返回首页
                </a>
            </div>
        </div>
    </div>

    <script>
        // 正则
        var userReg = /^(?!^\d+$)(?!^[a-z]+$)[0-9a-z]{6,12}$/;
        var pasReg = /^[0-9a-zA-Z]{6,8}$/;

        // 获取输入框
        var usernameipt = document.querySelector("#username");
        console.log(usernameipt);
        var pasipt = document.querySelector("#password");
        // usernameipt.onchange = function () {
        //     var usvalue = usernameipt.value;
        //     var span = document.querySelector(".usernamewrap span");
        //     if (!userReg.test(usvalue)) {
        //         span.style.display = 'block';
        //     } else {
        //         span.style.display = 'none';
        //     }
        // }

        // 获取注册按钮
        var regBtn = document.querySelector("#reg");
        regBtn.onclick = function () {
            // 获取用户名密码
            var usvalue = usernameipt.value;
            var pasvalue = pasipt.value;
            // console.log(usvalue, pasvalue);
            // 判断输入是否正确
            if (userReg.test(usvalue) && pasReg.test(pasvalue)) {
                // 输入都这正确发请求
                // console.log("正确");
                // 注册接口
                let regAPI = 'http://jx.xuzhixiang.top/ap/api/reg.php';
                let p = axios.get(regAPI, { params: { username: usvalue, password: pasvalue } });
                p.then(r => {
                    console.log(r);
                    if (r.data.code == 0) {
                        alert(r.data.msg+",请重新输入");
                    }else{
                        // 注册成功将用户名记录本地
                        localStorage.setItem("usname",usvalue);
                        alert(r.data.msg+"跳转登录");
                        location.href = './loginall.html';
                    }
                })

            }

            var spanus = document.querySelector(".usernamewrap span");
            if (!userReg.test(usvalue)) {
                // console.log("用户名错误");
                spanus.style.display = 'block';
            } else {
                spanus.style.display = 'none';
            }

            var spanpw = document.querySelector(".paswordwrap span");
            if (!pasReg.test(pasvalue)) {
                // console.log("密码输入错误");
                spanpw.style.display = "block";
            } else {
                spanpw.style.display = "none";
            }
        }
    </script>
</body>

</html>